<?php
require_once (dirname(__FILE__) . '/../config/config.php');
	
$workspaceWidth = WORKSPACE_WIDTH;
$workspaceHeight = WORKSPACE_HEIGHT;

//var_dump($_GET);

$scale = $_GET["scale"];
$dpi = $_GET["dpi"];
$price = $_GET["price"];

$bleedXL = $_GET["bleedXL"];
$bleedXR = $_GET["bleedXR"];
$bleedYT = $_GET["bleedYT"];
$bleedYB = $_GET["bleedYB"];
$extendedCanvasWidth = $_GET["extendedCanvasWidth"];
$extendedCanvasHeight = $_GET["extendedCanvasHeight"];

$containerWidthInch = $_GET["containerWidthInch"];
$containerHeightInch = $_GET["containerHeightInch"];

$canvasWidth = $extendedCanvasWidth - $bleedXL - $bleedXR;
$canvasHeight = $extendedCanvasHeight - $bleedYT - $bleedYB;



echo '<style type="text/css">';
getWorkspaceConfig($workspaceWidth, $workspaceHeight);
getExtendCanvasConfig($workspaceWidth, $workspaceHeight, $extendedCanvasWidth, $extendedCanvasHeight, $scale, $dpi, $containerWidthInch,$containerHeightInch);
getCanvasConfig($workspaceWidth, $workspaceHeight, $canvasWidth, $canvasHeight, $extendedCanvasWidth, $extendedCanvasHeight, $bleedXL, $bleedYT);
getOverlays($workspaceWidth, $workspaceHeight, $extendedCanvasWidth, $extendedCanvasHeight, $canvasWidth, $canvasHeight, $bleedXL, $bleedXR, $bleedYT, $bleedYB);
echo '</style>';
?>
<link rel="stylesheet" href="/css/editor.css" />

<div id="scaleHolder" class="hidden"><?php echo $scale; ?></div>
<div id="containerWidthInchHolder" class="hidden"><?php echo $containerWidthInch; ?></div>
<div id="containerHeightInchHolder" class="hidden"><?php echo $containerHeightInch; ?></div>
<div id="dpi" class="hidden"><?php echo $dpi; ?></div>
<div id="workspaceBackground"> </div>
<!-- Start overlays -->
<div id="leftOverlay" class="overlayElement"> </div>
<div id="leftLeftOverlay" class="overlayElement"> </div>
<div id="topOverlay" class="overlayElement"> </div>
<div id="topTopOverlay" class="overlayElement"> </div>
<div id="rightOverlay" class="overlayElement"> </div>
<div id="rightRightOverlay" class="overlayElement"> </div>
<div id="bottomOverlay" class="overlayElement"> </div>
<div id="bottomBottomOverlay" class="overlayElement"> </div>
<div id="canvasBorderOverlay" class="overlayElement"> </div>
<div id="extendedCanvasBorderOverlay" class="overlayElement"> </div>
<!-- End overlays -->
<div id="extendedCanvas"> </div>
<div id="canvas"> </div>
<div id="workspaceContainer">
	<div id="workspace">
		<!--img id="image1" src="/a.jpg" width="960" height="720" style="border: none;"/-->
	</div>
</div>
</div>

<script type="text/javascript">
	var imageWidth = <?php echo ($containerWidthInch * $dpi);?>;
	var imageHeight = <?php echo ($containerHeightInch * $dpi);?>;

	$("#resultingImageHolder")[0].width = imageWidth;
	$("#resultingImageHolder")[0].height = imageHeight;
	var canvas = $("#resultingImageHolder")[0];
	var ctx = canvas.getContext("2d");
	ctx.fillStyle = $("#resultingImageHolder").css("background-color");
	ctx.fillRect(0,0,imageWidth, imageHeight);
</script>
<?php
	function getWorkspaceConfig($workspaceWidth, $workspaceHeight){
		?>
		#workspace, #workspaceBackground {
			width: <?php echo $workspaceWidth;?>px;
			height: <?php echo $workspaceHeight;?>px;
		}
		<?php
	}
	
	function getExtendCanvasConfig($workspaceWidth, $workspaceHeight, $extendedCanvasWidth, $extendedCanvasHeight, $scale, $dpi, $containerWidthInch,$containerHeightInch){
		?>
		#extendedCanvas, #extendedCanvasBorderOverlay {
			width: <?php echo $extendedCanvasWidth;?>px;
			height: <?php echo $extendedCanvasHeight;?>px;
			margin-top: <?php echo ($workspaceHeight - $extendedCanvasHeight) / 2;?>px;
			margin-left: <?php echo ($workspaceWidth - $extendedCanvasWidth) / 2;?>px;
		}
		#resultingImageHolder {
			width: <?php echo ($containerWidthInch * $dpi);?>px;
			height: <?php echo ($containerHeightInch * $dpi);?>px;
		}
		<?php
	}
	
	function getCanvasConfig($workspaceWidth, $workspaceHeight, $canvasWidth, $canvasHeight, $extendedCanvasWidth, $extendedCanvasHeight, $bleedXL, $bleedYT){
		?>
		#canvas, #canvasBorderOverlay {
			width: <?php echo $canvasWidth;?>px;
			height: <?php echo $canvasHeight;?>px;
			margin-top: <?php echo ((($workspaceHeight - $extendedCanvasHeight) / 2) + $bleedYT);?>px;
			margin-left: <?php echo ((($workspaceWidth - $extendedCanvasWidth) / 2) + $bleedXL);?>px;
		}
		<?php
	}
	
	function getOverlays($workspaceWidth, $workspaceHeight, $extendedCanvasWidth, $extendedCanvasHeight, $canvasWidth, $canvasHeight, $bleedXL, $bleedXR, $bleedYT, $bleedYB){
		?>
		#leftLeftOverlay {
			width: <?php echo ($workspaceWidth - $extendedCanvasWidth) / 2;?>px;
			height: <?php echo $workspaceHeight;?>px; 
		}
		#leftOverlay {
			width: <?php echo $bleedXL;?>px;
			height: <?php echo $extendedCanvasHeight;?>px;
			margin-left: <?php echo ($workspaceWidth - $extendedCanvasWidth) / 2;?>px;
			margin-top: <?php echo ($workspaceHeight - $extendedCanvasHeight) / 2;?>px;
		}
		#topTopOverlay {
			width: <?php echo $extendedCanvasWidth;?>px;
			margin-left: <?php echo ($workspaceWidth - $extendedCanvasWidth) / 2;?>px;
			height: <?php echo ($workspaceHeight - $extendedCanvasHeight) / 2;?>px;
		}
		#topOverlay {
			width: <?php echo $canvasWidth;?>px; 
			height:  <?php echo $bleedYT;?>px;
			margin-left: <?php echo (($workspaceWidth - $extendedCanvasWidth) / 2) + $bleedXL;?>px;
			margin-top: <?php echo ($workspaceHeight - $extendedCanvasHeight) / 2;?>px;
		}
		#rightRightOverlay {
			width: <?php echo ($workspaceWidth - $extendedCanvasWidth) / 2;?>px;
			margin-left: <?php echo (($workspaceWidth - $extendedCanvasWidth) / 2) + $extendedCanvasWidth;?>px;
			height: <?php echo $workspaceHeight;?>px; 
		}
		#rightOverlay {
			width: <?php echo $bleedXR;?>px;
			margin-left: <?php echo (($workspaceWidth - $extendedCanvasWidth) / 2) + $bleedXL + $canvasWidth?>px;
			margin-top: <?php echo (($workspaceHeight - $extendedCanvasHeight) / 2);?>px;
			height: <?php echo $extendedCanvasHeight;?>px; 
		}
		#bottomBottomOverlay {
			width: <?php echo $extendedCanvasWidth;?>px; 
			height: <?php echo ($workspaceHeight - $extendedCanvasHeight) / 2;?>px;
			margin-left: <?php echo ($workspaceWidth - $extendedCanvasWidth) / 2;?>px;
			margin-top: <?php echo ((($workspaceHeight - $extendedCanvasHeight) / 2) + $bleedYT) + $bleedYB + $canvasHeight;?>px;
		}
		#bottomOverlay {
			width: <?php echo $canvasWidth;?>px;
			height: <?php echo $bleedYB;?>px;
			margin-left: <?php echo ((($workspaceWidth - $extendedCanvasWidth) / 2) + $bleedXL);?>px;
			margin-top: <?php echo (($workspaceHeight - $extendedCanvasHeight) / 2) + $bleedYT + $canvasHeight;?>px; 
		}
		<?php
	}
?>